import Vue from "vue";
import vueRouter from 'vue-router'
import routes from './routers'
import store from '@/store'
Vue.use(vueRouter)
const router = new vueRouter({
    mode: 'history',
    routes,
    scrollBehavior() {
        // return 期望滚动到哪个的位置,默认不滚动直接跳转前位置
        return { x: 0, y: 0 }
    }
})
// 创建白名单
let WriteName = [
    "login",
    "home",
    "register",
    "search",
    "detail",
    "addCartSuccess",]
router.beforeEach(async (to, form, next) => {
    let token = store.state.user.token
    let userInfo = store.state.user.userInfo
    if (token) {
        //一般情况下token只会含有token,所以需要想后端请求用户信息

        if (Object.keys(userInfo)?.length <= 0) {
            try {
                await store.dispatch('user/Userinfo')
                // 后端的鉴权处理,会检测请求中是否含有token请求头,拥有请求头才会有权力获取数据
                // 不需要每次进入时都请求用户信息,只有不存在用户信息时才请求
                // 除了使用请求使得当前token过期外,后端为token设置了过期时间,当时间到时就会直接过期
                // 这时本地访问时就会和先前一样,无法获取数据而且token也会一直存在,这时就需要直接删除本地token
                next()
                // 可以通过捕获错误的方式清除token
            } catch (error) {
                // 当进入这个捕获时代表出现错误,需要删除token本地
                // 调用退出函数,清除
                await store.dispatch('user/loginOut')
                // 但是发现无法进入到当前捕获
                // 由内部抛出错误并捕获后就可以处理
                // 并将其返回登录页
                next('/login')
                console.log(error);
            }

        } else {
            // 同时含有用户信息,和token,拥有最高通行权限
            next()
        }

    } else {
        if (WriteName.includes(to.name)) {
            next()
        }
        else {
            // 没有token,却又访问非白名单的就直接跳转到login页面
            next('/login')
        }
    }
})
export default router